<template>
	<view class="contents">
		<view class="head">
			<view class="my_top">
				<view class="url_img" @click="goto_personal">
					<image v-if="count" :src="userinfo.avatar" mode=""></image>
					<image v-if="!count" src="https://www.szzn.group/uploads/20221115/183193e92b0a813e1134627e155f1b33.png" mode=""></image>
				</view>
				<view class="content" >
					<view class="name" @click="gotoLogin">
						<view class="" v-if="count">{{userinfo.nickname == undefined ? '未登录':userinfo.nickname==''?'微信用户':userinfo.nickname}}</view> 
						<view class="" v-if="!count">未登录</view>
					</view>
					<view class="title" v-if="count">
						<view class="title_one">
							<image src="http://one-huoke.oss-cn-hangzhou.aliyuncs.com/75ca8202210271415506604.png"
								mode=""></image>会员等级{{level}}
						</view>
						<view class="title_two" @click="gotoSignin">  
							每日签到
						</view>
					</view>
				</view>
				<view class="set_img" @click="goto_set" v-if="count">
					<image src="http://one-huoke.oss-cn-hangzhou.aliyuncs.com/12b34202210271414237139.png" mode="">
					</image>
				</view>
			</view>
		</view>
		<view class="vip_card">
			<view class="vip_left">
				<view class="open_vip">
					开通会员，领取会员<span>专属</span>权益
				</view>
			</view>
			<view class="vip_right" @click="gotoMember"> 
				{{overduetime*1000-Date.now()>0?'续费会员':'成为会员'}}
			</view>
		</view>
		<view class="my_order">
			<view class="order_head" @click="goto_myoreder(-1)">
				<view class="" style="display: flex;">
					<view class="tits"></view>
					<view class="">我的订单</view>
				</view>
				<view class="" style="display: flex;align-items: center;margin-right: 20rpx;">
					<view class="" style="font-size: 24rpx;">全部</view>
					<image style="width: 30rpx;height:30rpx;vertical-align: middle;" src="http://one-huoke.oss-cn-hangzhou.aliyuncs.com/27270202209221534514540.png" mode=""></image>
				</view>
			</view>
			<view class="function_content">
				<block v-for="(item,index) in order" :key='index'>
					<view class="function_list" @click="goto_myoreder(index)">
						<view class="right-top" style="position: relative">
							<image class="list_icon" :src="item.img" mode=""></image>
							<view class="" v-if="count && item.count !=0" style="position: absolute;top: -15rpx;right: 27rpx;">
								<view class="jiaobiao">{{item.count}}</view>
							</view>
						</view>
						<view class="text">
							{{item.name}}
						</view>
					</view>
				</block>
			</view>
		</view>

		<view class="my_server">
			<view class="server_head">
				<view class="tits"></view>
				我的服务
			</view>
			<view class="function_content">
				<view class="function_list" @click="goto_server(0)">
					<image class="list_icon"
						src="http://one-huoke.oss-cn-hangzhou.aliyuncs.com/dafdd202210271428033225.png" mode=""></image>
					<view class="text">
						礼券卡包
					</view>
				</view>
				<view class="function_list" @click="goto_server(1)">
					<image class="list_icon"
						src="http://one-huoke.oss-cn-hangzhou.aliyuncs.com/7dba4202210271428161265.png" mode=""></image>
					<view class="text">
						收货地址
					</view>
				</view>
				<view class="function_list" @click="goto_server(2)">
					<image class="list_icon"
						src="http://one-huoke.oss-cn-hangzhou.aliyuncs.com/17cd3202210271428286239.png" mode=""></image>
					<view class="text">
						积分中心
					</view>
				</view>
				<view class="function_list" @click="goto_server(3)">
					<image class="list_icon"
						src="http://one-huoke.oss-cn-hangzhou.aliyuncs.com/891d3202210271428445844.png" mode=""></image>
					<view class="text">
						我的阳台
					</view>
				</view>
				<!-- <view class="function_list" @click="goto_server(4)">
					<image class="list_icon" src="" mode=""></image>
					<view class="text">
						商家端
					</view>
				</view> -->
				<view class="function_list" @click="goto_server(5)">
					<image class="list_icon"
						src="http://one-huoke.oss-cn-hangzhou.aliyuncs.com/104bc202210271430108693.png" mode=""></image>
					<view class="text">
						课程记录
					</view>
				</view>
				<view class="function_list" @click="goto_server(6)">
					<button open-type="share" plain hover-class='none'>
						<image class="list_icon"
							src="http://one-huoke.oss-cn-hangzhou.aliyuncs.com/10ecb202210271430246590.png" mode="">
						</image>
						<view class="text">
							圈子分享
						</view>
					</button>
				</view>
				<view class="function_list" @click="goto_server(7)">
					<image class="list_icon"
						src="http://one-huoke.oss-cn-hangzhou.aliyuncs.com/11c1c202210271430391955.png" mode=""></image>
					<view class="text">
						预约申请
					</view>
				</view>
				<view class="function_list" @click="goto_server(8)">
					<image class="list_icon"
						src="http://one-huoke.oss-cn-hangzhou.aliyuncs.com/55c0d202210271430523159.png" mode=""></image>
					<view class="text">
						推广中心
					</view>
				</view>
				<view class="function_list" @click="goto_server(9)">
						<image class="list_icon"
							src="https://www.szzn.group/uploads/20221121/c31e7ddbf50edf22efad602257f6b7a3.png" mode="">
						</image>
						<view class="text">
							优惠券
						</view>
					</button>
				</view>
				
				<view class="function_list" @click="goto_server(10)">
					<button open-type="contact" plain hover-class='none'>
						<image class="list_icon"
							src="http://one-huoke.oss-cn-hangzhou.aliyuncs.com/5be32202210271431033243.png" mode="">
						</image>
						<view class="text">
							联系客服
						</view>
					</button>
				</view>
			</view>
		</view>
		<tabbar @selectTabbar="selectTabbar" ref="tabbar"></tabbar>
	</view>

</template>

<script>
	import tabbar from '@/components/tabBar/tabBar.vue';
	import { infoMember,allOrder,memberInfo } from '@/api/api.js'
	export default {
		components: {
			tabbar
		},
		data() {
			return {
				order: [{
						name: '待付款',
						img: 'http://one-huoke.oss-cn-hangzhou.aliyuncs.com/ac30b202210271421272953.png',
						count:0
					},
					{
						name: '待发货',
						img: 'http://one-huoke.oss-cn-hangzhou.aliyuncs.com/02151202210271422038577.png',
						count:0
					},
					{
						name: '待收货',
						
						img: 'http://one-huoke.oss-cn-hangzhou.aliyuncs.com/9d979202210271422296426.png',
						count:0
					},
					{
						name: '待评价',
						img: 'http://one-huoke.oss-cn-hangzhou.aliyuncs.com/6f5f5202210271422419516.png',
						count:0
					},
					{
						name: '售后',
						img: 'http://one-huoke.oss-cn-hangzhou.aliyuncs.com/11caa202210271422559917.png',
						count:0
					}
				],
				server: [{
						name: '礼券卡包',
						img: 'http://one-huoke.oss-cn-hangzhou.aliyuncs.com/dafdd202210271428033225.png'
					},
					{
						name: '收货地址',
						img: 'http://one-huoke.oss-cn-hangzhou.aliyuncs.com/7dba4202210271428161265.png'
					},
					{
						name: '积分中心',
						img: 'http://one-huoke.oss-cn-hangzhou.aliyuncs.com/17cd3202210271428286239.png'
					},
					{
						name: '我的阳台',
						img: 'http://one-huoke.oss-cn-hangzhou.aliyuncs.com/891d3202210271428445844.png'
					},
					// {name:'商家端',img:''},
					{
						name: '课程记录',
						img: 'http://one-huoke.oss-cn-hangzhou.aliyuncs.com/104bc202210271430108693.png'
					},
					{
						name: '圈子分享',
						img: 'http://one-huoke.oss-cn-hangzhou.aliyuncs.com/10ecb202210271430246590.png'
					},
					{
						name: '预约申请',
						img: 'http://one-huoke.oss-cn-hangzhou.aliyuncs.com/11c1c202210271430391955.png'
					},
					{
						name: '推广中心',
						img: 'http://one-huoke.oss-cn-hangzhou.aliyuncs.com/55c0d202210271430523159.png'
					},
					{
						name: '优惠券',
						img: 'https://www.szzn.group/uploads/20221121/c31e7ddbf50edf22efad602257f6b7a3.png'
					},
					{
						name: '联系客服',
						img: 'http://one-huoke.oss-cn-hangzhou.aliyuncs.com/5be32202210271431033243.png'
					}
				],
				userinfo: {
					avatarUrl: '../../../static/logo.png',
					nickName: '登录/注册'
				},
				// 会员等级
				level:0,
				// 会员到期时间
				overduetime:'',
				count:false,
				userdata:''
			}
		},
		// 分享
		onShareAppMessage() {
			return {
				title: '优栽园',
				path: 'pages/my/index/index'
			};
		},
		// 分享到朋友圈
		onShareTimeline() {
			return {
				title: '优栽园',
				path: 'pages/my/index/index'
			};
		},
		onLoad() {
			// 获取头像和昵称
			this.userinfo = uni.getStorageSync('userInfo');
			if (!this.userinfo ) {
				this.userinfo.avatarUrl = '../../../static/apple.jpg',
				this.userinfo.nickName = '登录/注册'
				return
			};
			this.infoMember()
		},
		onShow() {
			this.allOrder()
			this.$refs.tabbar.current = 4;
			this.userdata = uni.getStorageSync('userInfo');
			if(this.userdata == ''|| this.userdata==null || this.userdata=='undefined'){
				this.count = false
			}else {
				this.count = true
			}
			if (!this.userdata) {
				this.userinfo.avatarUrl = '../../../static/apple.jpg',
				this.userinfo.nickName = '登录/注册'
				return
			}else {
				console.log(12345)
				memberInfo().then(res=>{
					console.log(res)
					this.userinfo = res.data.data;
					uni.setStorageSync('usesInfo',this.userinfo)
				})	
			}
			this.infoMember()
			
		},
		methods: {
			allOrder(){
				allOrder().then(res=>{
					console.log(res)
					this.order[0].count = res.data.data.dfk
					this.order[1].count = res.data.data.dfh
					this.order[2].count = res.data.data.dsh
					this.order[3].count = res.data.data.dpj
					this.order[4].count = res.data.data.sh
				})
			},
			// 去登录
			gotoLogin() {
				if (uni.getStorageSync('userInfo')) {
					return
				}
				uni.navigateTo({
					url: '/page_login/index/index'
				})
			},
			// 会员等级
			infoMember() {
				infoMember().then(res => {
					if(res.data.code == '200') {
						this.level = res.data.data.level
						this.overduetime = res.data.data.overdue_time
					}
				})
			},
		
			// 每日签到
			gotoSignin() {
				if (!uni.getStorageSync('userInfo')) {
					uni.showModal({
						title: '未登录，请先登录',
						success: function (res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/page_login/index/index'
								})
								
							} else if (res.cancel) {
							}
						}
					});
					return
				}
				uni.navigateTo({
					url:'/myIndex/dailyCheck/dailyCheck'
				})
			},
			// 成为会员
			gotoMember() {
				if (!uni.getStorageSync('userInfo')) {
					uni.showModal({
						title: '未登录，请先登录',
						success: function (res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/page_login/index/index'
								})
								
							} else if (res.cancel) {
							}
						}
					});
					return
				}
				uni.navigateTo({
					url:'/myIndex/becomeMember/becomeMember'
				})
			},
			// 进入服务页面
			goto_server(index) {
				if (!uni.getStorageSync('userInfo')) {
					uni.showModal({
						title: '未登录，请先登录',
						success: function (res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/page_login/index/index'
								})
								
							} else if (res.cancel) {
							}
						}
					});
					return
				}
				if (index == 0) {
					uni.navigateTo({
						url: '/myIndex/coupon/coupon'
					})
				} else if (index == 1) {
					uni.navigateTo({
						url: '/myIndex/address/address'
					})
				} else if (index == 2) {
					uni.navigateTo({
						url: '/myIndex/IntegralMall/IntegralMall'
					})
				} else if (index == 5) {
					uni.navigateTo({
						url: '/myIndex/courseRecord/courseRecord'
					})
				} else if (index == 7) {
					uni.navigateTo({
						url: '/myIndex/subscribeApply/subscribeApply'
					})
				}
				else if(index==8){
					uni.navigateTo({
						url:'/myIndex/promotionCenter/promotionCenter'
					})
				}
				else if(index==9){
					uni.navigateTo({
						url:'/myIndex/discounts/discounts'
					})
				}
			},
			// 进入我的订单
			goto_myoreder(index) {
				if (!uni.getStorageSync('userInfo')) {
					uni.showModal({
						title: '未登录,请先登录',
						success: function (res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/page_login/index/index'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					return
				}
				if (index == -1 || index < 4) {
					uni.navigateTo({
						url: '/myIndex/myorder/myorder?index=' + parseInt(index + 1)
					})
				} else if (index == 4) {
					uni.navigateTo({
						url: '/myIndex/afterSales/afterSales'
					})
				}

			},
			// 进入设置页面
			goto_set() {
				uni.navigateTo({
					url: '/myIndex/set/set'
				})
			},
			// 进入个人信息
			goto_personal() {
				if (!uni.getStorageSync('userInfo')) {
					uni.navigateTo({
						url: '/page_login/index/index'
					})
				} else {
					uni.navigateTo({
						url: '/myIndex/personal/personal'
					})
				}

			},
			// 切换tabbar
			selectTabbar(e) {
				uni.switchTab({
					url: e.pagePath
				});
			},
		}
	}
</script>

<style lang="scss">
	.contents {
		width: 100%;
		height: 100vh;
		background-color: rgb(247, 249, 252);

		.head {
			width: 100%;
			height: 410rpx;
			background: url('http://one-huoke.oss-cn-hangzhou.aliyuncs.com/44b56202210271507321121.png') no-repeat;
			background-size: 100% 100%;
			overflow: hidden;

			.my_top {
				width: 710rpx;
				height: 120rpx;
				margin: 160rpx auto 0;
				display: flex;
				align-items: center;

				.url_img {
					width: 120rpx;
					height: 120rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}

				.content {
					width: 500rpx;
					height: 120rpx;

					.name {
						box-sizing: border-box;
						width: 100%;
						height: 50rpx;
						line-height: 50rpx;
						font-size: 36rpx;
						color: #fff;
						padding-left: 32rpx;
					}

					.title {
						margin-top: 20rpx;
						width: 100%;
						box-sizing: border-box;
						height: 50rpx;
						padding-left: 32rpx;
						display: flex;
						align-items: center;

						.title_one {
							width: 166rpx;
							height: 44rpx;
							background-color: rgba(255, 255, 255, .5);
							border-radius: 22rpx;
							font-size: 24rpx;
							line-height: 44rpx;
							text-align: center;
							color: #F2A922;

							image {
								width: 24rpx;
								height: 24rpx;
								margin-right: 10rpx;
							}
						}

						.title_two {
							margin-left: 40rpx;
							width: 146rpx;
							height: 44rpx;
							border: 2rpx solid #F2A922;
							border-radius: 22rpx;
							color: #F2A922;
							line-height: 44rpx;
							text-align: center;
							font-size: 24rpx;
						}
					}
				}

				.set_img {
					width: 44rpx;
					height: 44rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.vip_card {
			width: 700rpx;
			height: 160rpx;
			background: url('http://one-huoke.oss-cn-hangzhou.aliyuncs.com/5f21d202210271416565686.png') no-repeat;
			background-size: 100% 100%;
			border-radius: 20rpx;
			margin: -80rpx auto 0;
			display: flex;
			align-items: center;

			.vip_left {
				width: 370rpx;
				margin-left: 52rpx;
				height: 100%;

				.open_vip {
					width: 370rpx;
					height: 30rpx;
					line-height: 30rpx;
					font-size: 28rpx;
					color: #FFD5A834;
					margin-top: 90rpx;

					span {
						color: #EECC92;
					}
				}
			}

			.vip_right {
				width: 150rpx;
				height: 52rpx;
				background: url('http://one-huoke.oss-cn-hangzhou.aliyuncs.com/e5194202210271419284199.png') no-repeat;
				background-size: 100% 100%;
				text-align: center;
				line-height: 52rpx;
				color: #fff;
				font-size: 26rpx;
				margin-left: 100rpx;
			}
		}

		.my_order {
			width: 700rpx;
			height: 280rpx;
			background-color: #fff;
			border-radius: 25rpx;
			margin: 35rpx auto 0;
			box-shadow: 0px 8.5px 25.5px #E9EFF5;
			overflow: hidden;

			.order_head {
				width: 100%;
				height: 34rpx;
				margin-top: 40rpx;
				color: #373948;
				font-size: 32rpx;
				line-height: 34rpx;
				font-weight: 400;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.tits {
					width: 8rpx;
					height: 34rpx;
					background-color: #327556;
					border-radius: 4rpx;
					margin-left: 16rpx;
					margin-right: 10rpx;
				}
			}

			.function_content {
				width: 670rpx;
				height: 160rpx;
				margin: 0 auto;
				display: flex;
				align-items: center;
				position: relative;

				.function_list {
					width: 154rpx;
					height: 110rpx;
					margin: 60rpx auto 0;
					position: relative;

					.list_icon {
						display: block;
						width: 44rpx;
						height: 44rpx;
						margin: 0 auto;
					}

					.text {
						margin-top: 10rpx;
						color: #000000;
						font-size: 24rpx;
						width: 100%;
						text-align: center;
				}
					}
			}
		}

		.my_server {
			width: 700rpx;
			height: 560rpx;
			background-color: #fff;
			border-radius: 25rpx;
			margin: 35rpx auto 0;
			box-shadow: 0px 8.5px 25.5px #E9EFF5;
			overflow: hidden;

			.server_head {
				width: 100%;
				height: 34rpx;
				margin-top: 40rpx;
				color: #373948;
				font-size: 32rpx;
				line-height: 34rpx;
				font-weight: 400;
				display: flex;

				.tits {
					width: 8rpx;
					height: 34rpx;
					background-color: #327556;
					border-radius: 4rpx;
					margin-left: 16rpx;
					margin-right: 10rpx;
				}
			}

			.function_content {
				width: 670rpx;
				height: 160rpx;
				margin: 0 auto;
				display: flex;
				flex-wrap: wrap;
				justify-content: start;

				.function_list {
					width: 165rpx;
					height: 110rpx;
					margin-top: 40rpx;
					button {
						width: 100%;
						height: 110rpx;
						border: none;

						.list_icon {
							display: block;
							width: 44rpx;
							height: 44rpx;
							margin: 0 auto;
						}

						.text {
							margin-top: -4rpx;
							color: #000000;
							font-size: 24rpx;
							width: 100%;
							text-align: center;
						}
					}

					.list_icon {
						display: block;
						width: 44rpx;
						height: 44rpx;
						margin: 0 auto;
					}

					.text {
						margin-top: 10rpx;
						color: #000000;
						font-size: 24rpx;
						width: 100%;
						text-align: center;
					}

				}
			}
		}
	}
	.jiaobiao {
		font-size: 20rpx;
		background-color: #d43030;
		width: 30rpx;
		text-align: center;
		height: 30rpx;
		line-height: 30rpx;
		color: #fff;
		border-radius: 50%;
		border: 1px solid #fff;
	}
</style>
